function bbSwiper(selector, swiperAll) {
    // 先把主元素找出来
    var swiper = document.querySelector(selector) //找到父元素 
    // 把要用的结构写上去
    swiper.innerHTML =
        `
    <div class="imgList">
        
    </div>
   
    <div class="swiperBtn">
        <div class="leftBtn">
            <img src="" alt="">
        </div>
        <div class="rightBtn">

        </div>
    </div>
   
    <div class="circleList">
      
    </div>
    `
    // 获取到装图片的盒子
    var imgList = document.querySelector(`${selector} .imgList`)
    // 遍历传过来的值
    swiperAll.forEach((item, i) => {
        // 判断如果type为img就创建图片 如果为video就创建为视频
        if(item.type == 'img'){
            imgList.innerHTML += ` <div class="imgitem" data-index="${i}">
            <img src="${item.url}" alt="">
        </div>`
        }
        if(item.type == 'video'){
            imgList.innerHTML += ` <div class="imgitem" data-index="${i}">
            <video src="${item.url}" alt="" autoplay muted loop>
        </div>`
        }
    });

    var leftBtn = document.querySelector('.leftBtn')
    var rightBtn = document.querySelector('.rightBtn')
    var index = 0;//当前照片的索引
    var leftIndex = null;//左边的图片
    var rightIndex = null;//右边的图片
// 全部图片
var imgLength = document.querySelectorAll('.imgitem')

leftBtn.onclick = function () {
    // 当前的索引给到当前图片
    leftIndex = index;
    // 索引减
    index--;
    // 当索引为小于0就等于长度减1
    if (index < 0) {
        index = imgLength.length - 1
    }
    // 循环遍历
    imgLength.forEach(function (item, i) {
          /* 我们给图片元素设置了一个data-indx的属性 
            当他的值等于当前的索引值的时候他就是显示的图片
            如果他的值等于leftIndex的值的时候就是要消失的图片
            */
        if (item.dataset.index == index) {
            item.className = 'imgitem leftJoin'
            circles[i].className = 'circle active'
        } else if (item.dataset.index == leftIndex) {
            imgLength[leftIndex].className = 'imgitem leftBefore'
            circles[i].className = 'circle '

        } else {
            item.className = "imgItem"
            circles.className = 'circle '

        }
    })





}

rightBtn.onclick = function () {
    // 当前索引值给到当前的图片
    rightIndex = index;
    index++
    // 当索引值加到最大 就是图片的长度
    if (index == imgLength.length) {
        index = 0
    }
    // 循环遍历图片
    imgLength.forEach(function (item, i) {
        if (item.dataset.index == index) {
            /* 我们给图片元素设置了一个data-indx的属性 
            当他的值等于当前的索引值的时候他就是显示的图片
            如果他的值等于rightIndex的值的时候就是要消失的图片
            */
            item.className = 'imgitem rightJoin'
            circles[i].className = 'circle active'

        } else if (item.dataset.index == rightIndex) {
            imgLength[rightIndex].className = 'imgitem rightBefore'
            circles[i].className = 'circle '

        } else {
            item.className = "imgItem"
            circles[i].className = 'circle '


        }
    })
}
// 创建小圆点
var circleList = document.querySelector('.circleList')
console.log(imgList);
imgLength.forEach((item,index)=>{
if(index==0){
    circleList.innerHTML += ('<div data-index="' +index + '" class="circle active"></div>')
}else {
    circleList.innerHTML += ('<div data-index="' + index + '" class="circle "></div>')

}
})
// 获取小li
var circles = document.querySelectorAll('.circle')


}
